<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
        <style type="text/css">
            .cart { margin: auto; border: 1px solid blue; width: 80vw; }
            .item { display: flex; margin: 0 10px; line-height: 30px; border-bottom: 1px solid #dedede;}
            .item .ordinal { flex-basis: 5%; text-align: center; }
            .item .name { flex-basis: 40%; }
            .item .price { flex-basis: 10%; text-align: right; }
            .item .amount { flex-basis: 20%; text-align: center; }
            .item .subtotal { flex-basis: 15%; text-align: right; }
            .item .operation { flex-basis: 10%; text-align: center;}
            
            .amount-handler { 
                display: inline-flex; 
                max-width: 180px;
                width: 80%;
                min-width: 100px;
                line-height: 20px;
                background: blue;
                border: 1px solid blue ;
                border-radius: 3px;
                overflow: hidden;
            }

            .amount-handler>* { text-align: center;}
            .amount-handler>a { flex-basis: 20%; color: #fff; user-select: none; }
            .amount-handler>b { flex-basis: 60%; background: #fff; }

            .total-wrapper { display: flex; margin: 0 10px; line-height: 30px; }
            .total-wrapper .total-price { margin-left: 75%; flex-basis: 15%; text-align: right; }
            .total-wrapper .settle { flex-basis: 10%; text-align: center;}
            
            .item .operation a ,
            .total-wrapper .settle a {
                display: inline-block;
                border-radius: 2px;
                padding: 5px;
                cursor: pointer;
                line-height: 16px;
                font-size: 14px;
                color: #fff;
                background: rgb(75, 75, 255);
                user-select: none;
            }
            .item .operation a:hover ,
            .total-wrapper .settle a:hover { background: rgb(26, 26, 229);}
        </style>
    </head>
    <body>

        <div id="root">
            <shopping-cart>
                <cart-item v-for="(item,index) in items" :key="item.id">
                    <span class="ordinal">{{ index + 1 }}</span>
                    <span class="name">{{ item.name }}</span>
                    <span class="price">{{ item.price }}</span>
                    <span class="amount">
                        <item-amount @decrease="handleDecrease" 
                                     @increase="handleIncrease"
                                     :item-id="item.id">
                            {{ item.amount }}
                        </item-amount>
                    </span>
                    <span class="subtotal">{{ item.price * item.amount }}</span>
                    <span class="operation">
                        <a @click="remove(item.id)">删除</a>
                    </span>
                </cart-item>
                <cart-total>{{ totalPrice }}</cart-total>
            </shopping-cart>
        </div>

        <!-- 导入 vue.js 3.x 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <script>

            const ShoppingCart = {
                template: `<div class="cart">
                               <slot>暂无数据</slot>
                           </div>`
            }

            const CartItem = {
                template: `<div class="item">
                               <slot>暂无数据</slot>
                           </div>`
            }

            const ItemAmount = {
                props: {
                    itemId: {
                        type: Number,
                        required: true
                    }
                },
                template: `<span class="amount-handler">
                               <a @click="jiang( itemId )">-</a>
                               <b>
                                  <slot>暂无数据</slot>
                               </b>
                               <a @click="sheng( itemId )">+</a>
                           </span>`,
                methods: {
                    jiang(){
                        this.$emit( 'decrease' , this.itemId );
                    },
                    sheng(){
                        this.$emit( 'increase' , this.itemId );
                    }
                }
            }

            const CartTotal = {
                template: `<div class="total-wrapper">
                               <span class="total-price">
                                    <slot></slot>
                               </span>
                               <span class="settle">
                                    <a>结算</a>
                               </span>
                           </div>`
            }

            // 根组件配置
            const options = {
                data(){
                    return {
                        items:  [
                            { id: 12 , name: '藜蒿炒腊肉' , price: 50 , amount: 50 },
                            { id: 10 , name: '荷包辣椒荷包蛋' , price: 28 , amount: 100 },
                            { id: 11 , name: '毛血旺' , price: 26 , amount: 150 },
                            { id: 27 , name: '回锅肉' , price: 40 , amount: 20 }
                        ]
                    }
                },
                computed: {
                    totalPrice(){
                        let total = this.items.reduce( (p,c) => p + c.price * c.amount , 0 );
                        return total.toLocaleString('zh-CN',{ style: 'currency' , currency: 'CNY' });
                    }
                },
                methods: {
                    remove(id) {
                        let index = this.items.findIndex( e => e.id == id );
                        this.items.splice( index , 1 );
                    },
                    handleDecrease(itemId){
                        let item = this.items.find( e => e.id == itemId );
                        if( item.amount <= 1 ) {
                            alert( '商品仅剩一个，数量不能再减了' );
                            return ;
                        }
                        item.amount-- ;
                    },
                    handleIncrease(itemId){
                        let item = this.items.find( e => e.id == itemId );
                        if( item.amount >= 1000 ) {
                            alert( '商品数量超出限制数量，不能再增加' );
                            return ;
                        }
                        item.amount++ ;
                    }
                }
            }
            const app = Vue.createApp(options);

            // 全局注册
            app.component( 'shopping-cart' , ShoppingCart );
            app.component( 'cart-item' , CartItem );
            app.component( 'item-amount' , ItemAmount );
            app.component( 'cart-total' , CartTotal );

            const root = app.mount('#root');
            console.log( root );
        </script>
        
    </body>
</html>